<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="68px">
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="queryParams.roleName" placeholder="请输入角色名称" clearable style="width: 240px"
                  @keyup.enter="handleQuery"/>
      </el-form-item>
      <el-form-item label="权限字符" prop="roleKey">
        <el-input v-model="queryParams.roleKey" placeholder="请输入权限字符" clearable style="width: 240px"
                  @keyup.enter="handleQuery"/>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="角色状态" clearable style="width: 240px">
          <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" style="width: 308px">
        <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
                        start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:role:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
                   v-hasPermi="['system:role:edit']">修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
                   v-hasPermi="['system:role:remove']">删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Download" @click="handleExport"
                   v-hasPermi="['system:role:export']">导出
        </el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 表格数据 -->
    <el-table v-loading="true" :data="reslist" @selection-change="handleSelectionChange">
      <!--      <el-table-column type="selection" width="55" align="center" />-->
      <!--      <el-table-column label="角色编号" prop="id" width="120" />-->
      <el-table-column label="级别" prop="level" :show-overflow-tooltip="true" width="150"/>
      <el-table-column label="组别" prop="Constituencies" :show-overflow-tooltip="true" width="150"/>
      <el-table-column label="专业大类" prop="classify" width="100"/>
      <el-table-column label="赛事名称" prop="tournamentName" width="100"/>
      <el-table-column label="赛项名称" prop="eventName" width="100"/>
      <el-table-column label="比赛方式" prop="mode" width="100"/>
      <el-table-column label="赛道" prop="race" width="100"/>
      <el-table-column label="负责部门" prop="dept" width="100"/>
      <el-table-column label="申报人" prop="delareMan" width="100"/>
      <el-table-column label="申报经费" prop="delareOutlay" width="100"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-tooltip content="修改" placement="top" v-if="scope.row.id !== 1">
            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                       v-hasPermi="['system:role:edit']"></el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top" v-if="scope.row.id !== 1">
            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                       v-hasPermi="['system:role:remove']"></el-button>
          </el-tooltip>
          <el-tooltip content="上报" placement="top" v-if="scope.row.id !== 1">
            <el-button link type="primary" icon="User" @click="handleAuthUser(scope.row)"
                       v-hasPermi="['system:role:edit']"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getList"/>

    <!-- 添加或修改角色配置对话框 -->
<!--    <el-dialog :title="title" v-model="open" width="500px" append-to-body>-->
<!--      <el-form ref="roleRef" :model="form" :rules="rules" label-width="100px">-->
<!--        <el-form-item label="角色名称" prop="name">-->
<!--          <el-input v-model="form.name" placeholder="请输入角色名称"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item prop="code">-->
<!--          <template #label>-->
<!--            <span>-->
<!--              <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">-->
<!--                <el-icon><question-filled/></el-icon>-->
<!--              </el-tooltip>-->
<!--              权限字符-->
<!--            </span>-->
<!--          </template>-->
<!--          <el-input v-model="form.code" placeholder="请输入权限字符"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="角色顺序" prop="sort">-->
<!--          <el-input-number v-model="form.sort" controls-position="right" :min="0"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="状态">-->
<!--          <el-radio-group v-model="form.status">-->
<!--            <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{-->
<!--                dict.label-->
<!--              }}-->
<!--            </el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="菜单权限">-->
<!--          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>-->
<!--          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选-->
<!--          </el-checkbox>-->
<!--          <el-checkbox v-model="form.menuCheckStrictly"-->
<!--                       @change="handleCheckedTreeConnect($event, 'menu')">父子联动-->
<!--          </el-checkbox>-->
<!--          <el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menuRef" node-key="id"-->
<!--                   :check-strictly="!form.menuCheckStrictly" empty-text="加载中，请稍候"-->
<!--                   :props="{ value: 'id', label: 'name', children: 'children' }"></el-tree>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="备注">-->
<!--          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <template #footer>-->
<!--        <div class="dialog-footer">-->
<!--          <el-button type="primary" @click="submitForm">确 定</el-button>-->
<!--          <el-button @click="cancel">取 消</el-button>-->
<!--        </div>-->
<!--      </template>-->
<!--    </el-dialog>-->

    <!-- 分配角色数据权限对话框 -->
<!--    <el-dialog :title="title" v-model="openDataScope" width="500px" append-to-body>-->
<!--      <el-form :model="form" label-width="80px">-->
<!--        <el-form-item label="角色名称">-->
<!--          <el-input v-model="form.roleName" :disabled="true"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="权限字符">-->
<!--          <el-input v-model="form.roleKey" :disabled="true"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="权限范围">-->
<!--          <el-select v-model="form.dataScope" @change="dataScopeSelectChange">-->
<!--            <el-option v-for="item in dataScopeOptions" :key="item.value" :label="item.label"-->
<!--                       :value="item.value"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="数据权限" v-show="form.dataScope == 2">-->
<!--          <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>-->
<!--          <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选-->
<!--          </el-checkbox>-->
<!--          <el-checkbox v-model="form.deptCheckStrictly"-->
<!--                       @change="handleCheckedTreeConnect($event, 'dept')">父子联动-->
<!--          </el-checkbox>-->
<!--          <el-tree class="tree-border" :data="deptOptions" show-checkbox default-expand-all ref="deptRef" node-key="id"-->
<!--                   :check-strictly="!form.deptCheckStrictly" empty-text="加载中，请稍候"-->
<!--                   :props="{ label: 'label', children: 'children' }"></el-tree>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <template #footer>-->
<!--        <div class="dialog-footer">-->
<!--          <el-button type="primary" @click="submitDataScope">确 定</el-button>-->
<!--          <el-button @click="cancelDataScope">取 消</el-button>-->
<!--        </div>-->
<!--      </template>-->
<!--    </el-dialog>-->
  </div>
</template>

<script setup name="Role">
import {addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect} from "@/api/contest/_role";
import {roleMenuTreeselect, treeselect as menuTreeselect} from "@/api/contest/_menu";
import {getCurrentInstance, reactive, ref} from "vue";

const router = useRouter();
const {proxy} = getCurrentInstance();
const {sys_normal_disable} = proxy.useDict("sys_normal_disable");

const roleList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const dateRange = ref([]);
const menuOptions = ref([]);
const menuExpand = ref(false);
const menuNodeAll = ref(false);
const deptExpand = ref(true);
const deptNodeAll = ref(false);
const deptOptions = ref([]);
const openDataScope = ref(false);
const menuRef = ref(null);
const deptRef = ref(null);

/** 数据范围选项*/
const dataScopeOptions = ref([
  {value: "1", label: "全部数据权限"},
  {value: "2", label: "自定数据权限"},
  {value: "3", label: "本部门数据权限"},
  {value: "4", label: "本部门及以下数据权限"},
  {value: "5", label: "仅本人数据权限"}
]);
// 假数据
const reslist = ref({
  level: '全国',
  Constituencies: '高职',
  classify: '计算机',
  tournamentName: '职业技能大赛',
  eventName: 'java程序设计',
  mode: '线下',
  race: 'java学生组',
  dept: '学校',
  declareMan: '异教徒',
  declareOutlay: '50000元'
})
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 0,
    pageSize: 10,
    name: undefined,
    code: undefined,
    status: undefined
  },
  rules: {
    name: [{required: true, message: "角色名称不能为空", trigger: "blur"}],
    code: [{required: true, message: "权限字符不能为空", trigger: "blur"}],
    sort: [{required: true, message: "角色顺序不能为空", trigger: "blur"}]
  },

});

const {queryParams, form, rules,} = toRefs(data);


/** 重置新增的表单以及其他数据  */
function reset() {
  if (menuRef.value != undefined) {
    menuRef.value.setCheckedKeys([]);
  }
  menuExpand.value = false;
  menuNodeAll.value = false;
  deptExpand.value = true;
  deptNodeAll.value = false;
  form.value = {
    id: undefined,
    name: undefined,
    code: undefined,
    sort: 0,
    status: "true",
    menuIds: [],
    // deptIds: [],
    menuCheckStrictly: true,
    deptCheckStrictly: true,
    remark: undefined,
    createTime: undefined
  };
  proxy.resetForm("roleRef");
}
</script>
